<template>
    <div class="relative animate-from-right">              
      <div>
        <h2 class="text-[30px] font-bold">创建一个账号 🚀 </h2>
        <p class="text-[14px]  --el-text-color-primary mt-[10px] mb-[30px]">让您的应用程序管理变得简单而有趣</p>
      </div>
        
    
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon
          :rules="rules"
          label-width="auto"
          size="large">
        <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
        </el-form-item>

        <el-form-item  prop="password">
            <el-input v-model="ruleForm.password" placeholder="密码" type="password" show-password />
        </el-form-item>
        <div class="password-progress-wrap w-full">
          <passwordStrong :ruleForm="ruleForm"/>

        </div>
       

        <el-form-item  prop="rePassword">
            <el-input v-model="ruleForm.rePassword" placeholder="确认密码" type="password" show-password />
        </el-form-item>

        <el-form-item label="" prop="checked" class="ehcked">
            <el-checkbox v-model="ruleForm.checked"  size="large" @change="setIsChecked" prop="">
                <el-row class="flex items-center">
                    我同意 <el-link type="primary" href="#" class="ml-[5px]">隐私政策和条款</el-link>

                </el-row>
               
            </el-checkbox>
        </el-form-item>
        <el-button type="primary" class="w-full" @click="pageRegister">注册</el-button>

        <el-row class="flex items-center justify-center w-full text-sm font mt-[15px]">
          已有帐号了
          <el-button type="primary" @click="goPage('login')" link>去登陆</el-button>
      </el-row>
          
      </el-form>
      
       
     
  
    </div>
  </template>

  <script setup lang='ts'>
import { register } from '@/api/auth'

  /**路由跳转**/
  const router =useRouter()
  const goPage=(path:any)=>{
    router.push(path)
  }
  /**是否勾选隐私政策**/
  let checked=ref(false)
  /**是否选中同意隐私政策**/
  const setIsChecked=(e:any)=>{
    ruleForm.checked=e
  }
  
  import type {FormRules} from 'element-plus'
  /**获取form**/
  const ruleFormRef = ref()
  /**提交数据**/
  const ruleForm = reactive({
    username: '',
    password: '',
    rePassword:'',
    checked:false
  })
 
  /**用户名验证**/
  const validateUsername = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请填写用户名'))
    } else {
      callback()
    }
  }



 /**密码验证**/
  import {useRePassword} from '@/composables/userManager'
  const {validatePassword} = useRePassword(ruleForm)



 

    /**密码验证**/
    const validateRePassword = (rule: any, value: any, callback: any) => {
    if (value!='') {
      if(value!=ruleForm.password){
        callback(new Error('两次密码不一致'))
      }  
      callback()
    } else {
      callback(new Error('请填写确认密码'))

    }
  }
  //验证方式 表单失焦时验证
  const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: ['blur','change'] }],
    rePassword: [{ validator: validateRePassword, trigger:['blur','change'] }],
    checked:[{ validator:(rule: any, value: any, callback: any)=>{
        if(!value){
            callback(new Error('未同意隐私政策和条款'))

        }else{
            callback()
        }

    }, trigger:['blur','change'] }],
  })
  
  
  //注册
  const pageRegister=async()=>{
    try {
        await ruleFormRef.value.validate();
        
        // 注册逻辑...
        let res=await register({username:ruleForm.username,password:ruleForm.password})

             goPage('/auth/login')
        
      } catch (error) {
       
            //console.log(error)
        
       // console.error('注册错误:', error);
       
      }
  }

  
  </script>
  
  <style scoped lang='scss'>
  .password-progress-wrap .el-progress--line {
    margin-bottom: 15px;
  width: 19.2%;
}


:deep(.el-checkbox.el-checkbox--large){height:auto}

  </style>